<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
    window.onload=function()
    {
        //为id为btn04的按钮绑定一个单击响应函数
        var btn04=document.getElementById("btn04");
        btn04.onclick=function()
        {
            //获取id为city的元素
            var city=document.getElementById("city");
            //查找#city下所有li节点
            var cityli=city.getElementsByTagName("li");
            console.log(cityli.length);
            console.log(cityli);
            for(var i=0;i<cityli.length;i++)
            {
                console.log(cityli[i].innerHTML);
            }
        };

        var btn05=document.getElementById("btn05");
        btn05.onclick=function()
        {
            //获取id为city的节点
            var city=document.getElementById("city");
            //返回#city的所有子节点
            //childNodes属性会获取包括文本节点在内的所有节点
            //zai IE8及以下的浏览器中，不会把空白当成子节点
            var citycn=city.childNodes;
            console.log(citycn.length);//多出来的五个是空白文本
            console.log(citycn);
            //children属性可以获取当前元素的所有子元素
            //相比childNodes，用children更好一点
            var citycn2=city.children;
            console.log(citycn2);
        }

        //为id为btn06的按钮绑定一个单机响应函数
        var btn06=document.getElementById("btn06");
        btn06.onclick=function()
        {
            //获取id为phone的元素
            var phone=document.getElementById("phone");
            //返回#phone的第一个子节点
            //firstChild可以获取到当前元素的第一个子节点（包括空白文本）
            var phone01=phone.childNodes[0];
            console.log(phone01);
            console.log(phone.firstChild);
            //firstElementChild可以获取当前元素的第一个子元素
            //此方法不支持IE8以下的浏览器，如果需要兼容IE8，尽量不要使用此方法
            console.log(phone.firstElementChild);
            //类似的还有lastChild，找最后一个子节点
        }
    };
    </script>
</head>
<body>
    
    <ul id="city">
        <li>语文课</li>
        <li>数学课</li>
        <li>英语课</li>
        <li>物理课</li>
    </ul>
    <ul id="phone">
        <li>IOS</li>
        <li>Android</li>
        <li>Windows Phone</li>
    </ul>
    <button id="btn04">查找功能四</button>
    <button id="btn05">查找功能五</button>
    <button id="btn06">查找功能六</button>
</body>
</html>